<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 1.界面布局 多个复选框和图片展示需要使用v-for循环来执行-->
        <h3>你最喜欢哪个明星?</h3>
        <input type="checkbox" @change="fullCheck()" v-model="all">全选<br>
        <!-- 通过循环实现复选框按钮的展示，别忘了先创建数组变量-->
        <span v-for="item in list"><input type="checkbox" @change="checkClick()" v-model="item.check">{{item.name}}</span><br>
    
        新增其他：<input type="text" v-model="newName"><br>
        <!-- 新增一个文件上传的Dom-->
        <input type="file" @change="load($event)" ><br><button @click="add()">上传（把信息上传到数组里面）</button><br>
        
        <button @Click="full(true)">全选</button>
        <button @Click="full(false)">全不选</button>
        <button @Click="rev()">反选</button><br>
        <span v-for="item in imgs">
            <img :src="item" alt="E个Dream" style="width: 200px;height: 300px;">
        </span>
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data(){
            return{
                list:[{name:'赵丽颖',src:'./zhaoliying.jpeg',check:false},
                      {name:'杨幂',src:'./yangmi.jpeg',check:false},
                      {name:'谭松韵',src:'./tansongyun.jpeg',check:false},
                      {name:'赵露思',src:'./zhaolusi.jpeg',check:false},
                ],
                imgs:[],
                all:false,
                fileSrc:'',
                newName:'',
                newFile:''
            }
        },
        methods: {
            showImages(){
                this.imgs=[]
                this.list.map(v =>{
                    if(v.check){
                        this.imgs.push(v.src)
                    }
                })
            },
            checkClick(){
                let flag = this.list.length //先获取数组长度，赋值给变量
                //对数组进行遍历,如果碰到check是false，flag-1
                this.list.map( v=>{
                    if(v.check == false) flag--
                })
                //如果循环结束后，flag仍然等于数组的长度，则all变量置为true
                if(flag == this.list.length) {
                    this.all = true
                }else{
                    this.all=false
                }
                this.showImages()
            },
            fullCheck(){
                if(this.all){
                    this.list.map(v => {v.check=true})
                }else{
                    this.list.map(v => {v.check=false})
                }
                this.showImages()
            },
            full(st){
                this.list.map(v => {v.check=st})
                this.all=st
                this.showImages()
            },
            rev(){
                this.list.map( v => {v.check=!v.check}) 
                this.checkClick()
            },
            load(e){

                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = (target)=>{
                    alert("上传成功")
                    this.fileSrc = target.result
                    console.log(this.fileSrc)
                } 

            },
            add(){
                if(this.newName != ''){
                    this.list.push({
                    name:this.newName,
                    src:this.fileSrc,
                    check:false
                })
                }else{
                    alert("请输入你要添加的明星名称")
                }
                
            }
        },
    }).mount("#app")
</script>